<template>
	<view>
		<view class="header">
			<view class="back-color-c p-l-30 p-r-30 h-92 flex">
				<u-search placeholder="请输入关键词" @search='search' @clear='search' v-model="name" :showAction="false"></u-search>
			</view>
			<view class="back-color-c h-88 line-1">
				<u-tabs class="h-88" :itemStyle="{
          height: '94rpx',
          'fontSize': '32rpx'
        }" :list="list1" @click="click" lineColor="#FB2D19" :activeStyle="{
  color: '#FB2D19',
  'font-weight': 500
}"></u-tabs>
			</view>
		</view>

		<view class="p-l-30 m-t-20 p-b-10 p-r-30 list" ref="list">
			<common-list @load="getLandlordHelpList" :list="list" :status="status">
				<template #list>
					<view v-for="(item,i) in list" :key="i" class="back-color-c radius-12 m-b-20 hidden"
						@click="jump(`/pages/user/course-details?id=${item.id}`)">
						<image class="wb-100" :src="item.img_url" mode="widthFix" />
						<view class="p-l-30 p-r-30 p-b-30 color-a font-24">
							<view class="font-32 color-d m-t-14 font-weight-500 line-1">{{item.title}}</view>
							<view class="flex-between m-t-12">
								<text class="line-1">{{item.create_time | date('yyyy-mm-dd')}}</text>
								<view class="line-1 flex">
									<u-icon name="eye" class='m-r-10'></u-icon>{{item.watch_num}}
								</view>
							</view>
						</view>
					</view>
				</template>
				<template #empty>
					<empty text="暂无内容～"></empty>
				</template>
			</common-list>
		</view>
	</view>
</template>

<script>
	export default {
		name: "course",
		data() {
			return {
				name: '',
				page: 1,
				status: 'loading',
				list: [],
				list1: [],
				type: 1,
				class_id: ''
			}
		},
		onLoad() {
			this.getLandlordHelpClassList()
		},
		onReachBottom() {
			if (this.status === 'nomore') return
			this.getLandlordHelpList()
		},
		methods: {
			search() {
				this.list = []
				this.page = 1
				this.getLandlordHelpList()
			},
			click(item) {
				this.class_id = item.class_id
				this.list = []
				this.page = 1
				this.getLandlordHelpList()
			},
			async getLandlordHelpClassList() {
				const res = await this.$api.common.landlord('getLandlordHelpClassList')
				if (res.code === 200) {
					this.list1 = res.data
					this.click(this.list1[0])
				}
			},
			async getLandlordHelpList() {
				const {
					page,
					limit,
					class_id,
					name
				} = this
				let params = {
					page,
					limit,
					class_id,
					name
				}
				this.status = 'loading'
				const res = await this.$api.common.landlord('getLandlordHelpList', params)
				if (res.code === 200) {
					const {
						count,
						list
					} = res.data
					this.list = [...this.list, ...list]
					if (this.list.length >= count) {
						// 所有数据加载完毕
						this.status = 'nomore'
						return
					}
					// 单次请求数据完毕
					this.status = 'loadmore'
					this.page = this.page + 1
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		position: sticky;
		// #ifdef APP-PLUS
		top: 0;
		// #endif
		// #ifdef H5
		top: 88rpx;
		// #endif
		left: 0;
		width: 100%;
		z-index: 1;
	}

	.item {
		height: calc(92rpx + 88rpx + 30rpx);
	}
</style>
